<template>
    <a-card title="视频素材列表">

        <a-dropdown slot="extra">
            <a-menu slot="overlay">
                <a-menu-item key="1" @click="editShow=true">
                    <a-icon type="upload"/>
                    上传新视频
                </a-menu-item>
                <a-menu-divider/>
                <a-menu-item key="2" @click="syncMaterial">
                    <a-icon type="download"/>
                    同步素材库
                </a-menu-item>

            </a-menu>
            <a-button type="danger" style="margin-left: 8px">新增视频素材
                <a-icon type="down"/>
            </a-button>
        </a-dropdown>


        <a-list :grid="{ gutter:16, column: 6 }"
                :loading="ListLoading"
                :pagination="pagination"
                :data-source="dataSource">
            <a-list-item slot="renderItem" slot-scope="item, index">
                <a-card :hoverable="true" :title="item.mediaName">

                    <p style="text-align: center">
                        <a-button

                                type="primary"
                                @click="()=>{playUrl=item.mediaUrl;playModalShow=true }" shape="round"
                                icon="play-circle"
                                size="large">
                            预览播放
                        </a-button>
                    </p>


                    <template slot="actions" class="ant-card-actions">
                        <span @click="downMaterial(item.mediaUrl)"><a-icon type="download"/>下载</span>
                        <span @click="deleteMaterial(item.mediaId)"><a-icon type="delete"/>删除</span>
                    </template>
                </a-card>
            </a-list-item>
        </a-list>
        <VideoPlay :url="playUrl" v-if="playModalShow" @closeModal="()=>{  playModalShow=false ; playUrl=null }"/>
        <VideoForm v-if="editShow" @closeFun="closeEdit" :mediaType="mediaType"/>
    </a-card>
</template>
<script>
    import {pagination} from '../../../public/colums.js';
    import {
        materialList,
        deleteMaterial,
        syncMaterialFile
    } from '../../../public/http.js';


    export default {
        props: ['mediaType'],
        components: {
            'VideoPlay': () => import('./player'),
            'VideoForm': () => import('./form')
        },
        data() {
            return {
                playModalShow: false,
                playUrl: null,
                editShow: false,
                voiceSrc: "",
                upLoading: false,
                ListLoading: false,
                dataSource: [],
                pagination: {
                    ...pagination,
                    pageSize: 12,
                    onChange: current => {
                        this.pagination.current = current;
                        this.getMaterialList();
                    }
                },
                loading: false, //表格loading
                searchData: {mediaType: this.mediaType}
            };
        },
        methods: {

            //同步公众平台内的图片素材
            syncMaterial() {
                this.ListLoading = true;
                syncMaterialFile(this.mediaType).then(res => {
                    this.$exMod.ajaxMessage(res);
                    this.getMaterialList();
                });
                this.ListLoading = false;
            },

            //下载视频素材
            downMaterial(url) {
                window.open(url, "_blank");
                return true;
            },
            //2.1 关闭编辑器
            closeEdit(e) {
                this.editShow = false;
                if (e.render) {
                    this.getMaterialList();
                }
            },

            //1.0 获取表格数据
            getMaterialList() {
                this.ListLoading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchData); //删除对象中的空值
                materialList(this.pagination, searchData).then(res => {
                    this.ListLoading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },
            deleteMaterial(mediaId) {
                const _this = this;
                this.$confirm({
                    width: 350,
                    title: `确定要删除这个视频素材吗?`,
                    onOk() {
                        deleteMaterial(mediaId).then(res => {
                            _this.$exMod.ajaxMessage(res);
                            if (res.code === 0) {
                                _this.getMaterialList();
                            }
                        })
                    },
                });
            },


        },
        created() {
            this.getMaterialList();
        }
    }
</script>
<style>
    .audioBox {
        width: 100%;
        height: 50px;
        justify-content: center;
        background-color: #F5F5F5;
        color: chocolate;
        padding: 10px;
        margin-bottom: 10px;
    }
</style>
